<template>
	<div	class="steps">
		<div class="step">
			<div class="name">① 适用玩具</div>
			<div class="toys">
				<div
					class="toy"
					v-for="toy in course.adaptToys.filter(item => item.img)"
					:key='toy.name'
				>
					<div class="label">{{toy.name}}</div>
					<Tag
						bgColor="#EFF3F3"
						width="195px"
						height="195px"
					>
						<img :src="toy.img">
					</Tag>
				</div>
			</div>
		</div>
		<div class="step">
			<div class="name">② 玩具尺寸</div>
			<div class="label" />
			<div>
				<Tag
					bgColor="#EFF3F3"
					width="195px"
					height="195px"
				>
					<div
						class="size"
						v-html="course.size"
					/>
				</Tag>
			</div>
		</div>
		<div class="step">
			<div class="name">③ 所需材料</div>
			<div class="materials">
				<div
					class="material"
					v-for="(item,i) in course.materials"
					:key="item.name"
					@click="onclickMaterial(item)"
				>
					<div class="label">{{i+1}}、{{item.name}}</div>
					<Tag
						bgColor="#EFF3F3"
						width="195px"
						height="195px"
					>
						<img
							:style="{
								'cursor': item.clickCb ? 'pointer' : 'default'
							}"
							:src="item.img"
						>
					</Tag>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  props: {
    course: Object,
  },
  methods: {
    onclickMaterial(item) {
      item.clickCb && item.clickCb()
    }
  }
}
</script>

<style lang='scss' scoped>
.steps {
  display: flex;
  overflow-x: auto;

  .step {
    margin-right: 54px;

    .name {
      color: #01937c;
    }

    .label {
      height: 44px;
      line-height: 44px;
      color: $color1;
      text-align: center;
    }

    .toys {
      display: flex;
      font-size: $sSmall;

      .toy:not(:last-of-type) {
        margin-right: 24px;
      }
    }

    .size {
      line-height: 40px;
      color: rgba(0, 62, 52, 0.7);
      white-space: pre-wrap;
    }

    .materials {
      display: flex;

      .material {
        margin-right: 24px;
        font-size: 20px;
      }
    }
  }
}
</style>
